---
type: tutorial
title : 'De retour sur la terre ferme. Passer votre blog du jour à la nuit, aucun îlot nécessaire !'
description: |-
  Tutoriel : Créer votre premier blog avec Astro —
  Créez un interrupteur de thème clair/sombre en utilisant uniquement JavaScript et CSS
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous savez comment créer des îlots Astro pour des éléments interactifs, n'oubliez pas que vous pouvez aller assez loin avec seulement du JavaScript et du CSS !

Construisons une icône cliquable pour permettre à vos utilisateurs de basculer entre le mode clair ou sombre en utilisant une autre balise `<script>` pour l'interactivité... sans envoyer de JavaScript de framework au navigateur.

<PreCheck>
  - Créer un interrupteur de thème interactif avec seulement JavaScript et CSS
  - Envoyer le moins de JavaScript possible au navigateur !
</PreCheck>

## Ajouter et mettre en forme une icône de bascule de thème

<Steps>
1. Créez un nouveau fichier à `src/components/ThemeIcon.astro` et collez le code suivant dedans :

    ```astro title="src/components/ThemeIcon.astro"
    ---
    ---
    <button id="themeToggle" aria-label="Toggle theme">
      <svg aria-hidden="true" width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
        <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
      </svg>
    </button>

    <style>
      #themeToggle {
        border: 0;
        background: none;
      }
      .sun { fill: black; }
      .moon { fill: transparent; }

      :global(.dark) .sun { fill: transparent; }
      :global(.dark) .moon { fill: white; }
    </style>
    ```

2. Importez et ajoutez le composant `<ThemeIcon />` à `Header.astro` afin qu'il s'affiche sur toutes les pages. Regroupez `<ThemeIcon />` et `<Menu />` dans une balise `<div>` pour les mettre en forme, et ajoutez la balise `<style>` comme indiqué ci-dessous pour ajouter certains styles de base afin d'améliorer la mise en page.

    ```astro title="src/components/Header.astro" ins={4,8-9,11,16-21}
    ---
    import Menu from './Menu.astro';
    import Navigation from './Navigation.astro';
    import ThemeIcon from './ThemeIcon.astro';
    ---
    <header>
      <nav>
        <div>
          <ThemeIcon />
          <Menu />
        </div>
        <Navigation />
      </nav>
    </header>

    <style>
      div {
        display: flex;
        justify-content: space-between;
      }
    </style>
    ```

3. Visitez l'aperçu dans votre navigateur à l'adresse `http://localhost:4321` pour vérifiez que l'icône est désormais sur toutes vos pages. Vous pouvez essayer de cliquer dessus, mais vous n'avez pas encore écrit de script pour la rendre interactive.
</Steps>

## Ajouter des styles CSS pour un thème sombre

Choisissez quelques couleurs alternatives à utiliser en mode sombre.

<Steps>
1. Dans `global.css`, définissez quelques styles sombres. Vous pouvez choisir les vôtres ou copier-coller :

    ```css title="src/styles/global.css"
    html.dark {
      background-color: #0d0950;
      color: #fff;
    }

    .dark .menu {
      background-color: #fff;
      color: #000;
    }

    .dark .nav-links a:hover,
    .dark .nav-links a:focus {
      color: #0d0950;
    }

    .dark .nav-links a {
      color: #fff;
    }

    .dark a {
      color: #ff9776;
    }
    ```
</Steps>

:::tip[Vérifiez les couleurs pour l'accessibilité]
Lorsque vous mettez à jour votre site pour inclure le mode sombre, certaines couleurs utilisées peuvent nécessiter une mise à jour.

Vérifiez toujours le rendu de votre site lorsque vous ajoutez de nouveaux styles et couleurs, et effectuez des ajustements si nécessaire ! Cela peut impliquer l'ajout de règles de style CSS `.dark` supplémentaires pour afficher différents styles en mode sombre, ou la mise à jour de certaines couleurs pour qu'elles fonctionnent aussi bien avec les deux thèmes.

Pensez à utiliser des outils d'accessibilité comme un vérificateur de contraste lors de la création d'un jeu de couleurs pour votre site. Vous pouvez également effectuer une vérification de votre site web avec une extension de navigateur pour identifier d'éventuels problèmes.
:::

## Ajouter de l'interactivité côté client

Pour ajouter de l'interactivité à un composant Astro, vous pouvez utiliser une balise `<script>`. Ce script peut vérifier et définir le thème actuel à partir de `localStorage` et basculer le thème lorsque l'icône est cliquée. 
<Steps>
1. Ajoutez la balise `<script>` suivante dans `src/components/ThemeIcon.astro` après votre balise `<style>` :

    ```astro title="src/components/ThemeIcon.astro" ins={9-38}
    <style>
      .sun { fill: black; }
      .moon { fill: transparent; }

      :global(.dark) .sun { fill: transparent; }
      :global(.dark) .moon { fill: white; }
    </style>

    <script is:inline>
      const theme = (() => {
        const localStorageTheme = localStorage?.getItem("theme") ?? '';
        if (['dark', 'light'].includes(localStorageTheme)) {
          return localStorageTheme;
        }
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
          return 'dark';
        }
          return 'light';
      })();
          
      if (theme === 'light') {
        document.documentElement.classList.remove('dark');
      } else {
        document.documentElement.classList.add('dark');
      }

      window.localStorage.setItem('theme', theme);

      const handleToggleClick = () => {
        const element = document.documentElement;
        element.classList.toggle("dark");
        
        const isDark = element.classList.contains("dark");
        localStorage.setItem("theme", isDark ? "dark" : "light");
      }

      document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
    </script>
    ```

2. Vérifiez l'aperçu dans votre navigateur à l'adresse `http://localhost:4321` et cliquez sur l'icône du thème. Vérifiez que vous pouvez basculer entre les modes clair et sombre.
</Steps>

<Box icon="question-mark">

### Tester vos connaissances

Choisissez si chacune des affirmations suivantes décrit les balises `<script>` d'Astro, des composants de framework UI, ou les deux.

1. Ils vous permettent d'inclure des éléments d'interface utilisateur interactifs sur votre site web.

    <MultipleChoice>
      <Option>
        Balises `<script>` d'Astro
      </Option>
      <Option>
        Composants de framework UI
      </Option>
      <Option isCorrect>
        les deux
      </Option>
    </MultipleChoice>

2. Ils créeront des éléments statiques sur votre site sauf si vous incluez une directive `client:` pour envoyer leur JavaScript au client et le faire s'exécuter dans le navigateur.

    <MultipleChoice>
      <Option>
        Balises `<script>` d'Astro
      </Option>
      <Option isCorrect>
        Composants de framework UI
      </Option>
      <Option>
        les deux
      </Option>
    </MultipleChoice>

3. Ils vous permettent de « tester » un nouveau framework sans vous obliger à démarrer un tout nouveau projet utilisant cette pile technologique.

    <MultipleChoice>
      <Option>
        Balises `<script>` d'Astro
      </Option>
      <Option isCorrect>
        Composants de framework UI
      </Option>
      <Option>
        les deux
      </Option>
    </MultipleChoice>

4. Ils vous permettent de réutiliser du code que vous avez écrit dans d'autres frameworks et vous pouvez souvent les intégrer directement dans votre site.

    <MultipleChoice>
      <Option>
        Balises `<script>` d'Astro
      </Option>
      <Option isCorrect>
        Composants de framework UI
      </Option>
      <Option>
        les deux
      </Option>
    </MultipleChoice>

5. Ils vous permettent d'ajouter de l'interactivité sans avoir besoin de connaître ou d'apprendre d'autres frameworks JavaScript.

    <MultipleChoice>
      <Option isCorrect>
        Balises `<script>` d'Astro
      </Option>
      <Option>
        Composants de framework UI
      </Option>
      <Option>
        les deux
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Liste de contrôle

<Checklist>
- [ ] Je peux utiliser JavaScript pour l'interactivité lorsque je ne veux pas ajouter de framework.
</Checklist>
</Box>

### Ressources

- [Balises `<script>` côté client dans Astro](/fr/guides/client-side-scripts/)
